<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Layout - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../../demo.css">
	<script type="text/javascript" src="../../../../jquery.min.js"></script>
	<script type="text/javascript" src="../../../../jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../../../../jquery.serializeObject.js"></script>
	<script type="text/javascript" src="jquery.parseurl.min.js"></script>
	<script src="../xheditor/xheditor-1.2.2.min.js"  type="text/javascript" charset="utf-8"></script>
	<script src="../xheditor/xheditor_lang/zh-cn.js"  type="text/javascript" charset="utf-8"></script>
	
</head>
<body>
	<div class="easyui-layout" data-options="fit:true">
		<div data-options="region:'west',split:true" title="West" style="width:150px;">
			<div class="easyui-accordion" data-options="fit:true">
				<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
					
					<ul id="tt"></ul>
					
				</div>
			</div>
		</div>
		<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
			<div id="wu-tabs" class="easyui-tabs" data-options="border:false,fit:true">

				 <div title="新闻管理" data-options="closable:false,iconCls:'icon-tip',cls:'pd3'">
				 	<table id="dg"></table>
				 	<div id="tb" style="padding:5px;height:auto">
						<div style="margin-bottom:5px">
							<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addPop()">添加</a>
							<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deletePop()">删除</a>
							keywords: <input class="easyui-textbox" style="width:150px" name="keywords" id="keywords">
							<a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="keySearch()">搜索</a>
						</div>
					</div>
				 	<div id="w" class="easyui-window" title="Window Layout" data-options="iconCls:'icon-save',closed:true" style="width:500px;height:200px;padding:5px;">
						<div class="easyui-layout" data-options="fit:true">
							<div data-options="region:'center'" style="padding:10px;">
								Are you sure you want to delete it ?
							</div>
							<div data-options="region:'south',border:false" style="text-align:right;padding:5px 0 0;">
								<a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)" onclick="removeMessage()" style="width:80px">确定</a>
								<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="cancelRemove()" style="width:80px">取消</a>
							</div>
						</div>
					</div>
					
					<div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="width:600px;height:400px;padding:10px">
				        <!--form-->
				        <form id="ff" method="post">
				            <div style="margin-bottom:15px">
				                <input class="easyui-textbox" name="title" style="width:100%" data-options="label:'Title:',required:true">
				            </div>
				            <div style="margin-bottom:15px">
				                <input class="easyui-textbox" name="author" style="width:100%" data-options="label:'Author:',required:true">
				            </div>
				             <div style="margin-bottom:15px">
				                <input class="easyui-textbox" name="sort" style="width:100%" data-options="label:'Sort:',required:true">
				            </div>
				             <div style="margin-bottom:15px">
				             		Content:
				                	<!--xheditor-->
				                	<textarea  name="content" class="xheditor" rows="8" cols="2" style="width: 100%"></textarea>
				            </div>
				            <div style="margin-bottom:15px">
				                <input type="text" name="_id" class="easyui-textbox" style="width:100%"/>
				            </div>
				        </form>
				        <!--button-->
				        <div style="text-align:center;padding:5px 0">
				            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
				            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
				        </div>
				    </div>
				 	
				 </div>
			
			</div>
		</div>
	</div>
	
	
	
</body>
</html>
<script type="text/javascript">
	//调用addTab
			
	$('#tt').tree({
		method:'get',
	    url:'http://localhost:3000/cate/list',
	    onClick (node){
//			    	console.log(node.text == '国内新闻')
	    	var  title = node.text;
			var  id=node._id;
			console.log(id);
			addTab(title, 'layout-domestic.html?id='+id, null, 1)
	    }
	});
	
	// iframe 0:div,1:iframe
	function addTab(title, href, iconCls, iframe){
		var tabPanel = $('#wu-tabs');
		if(!tabPanel.tabs('exists',title)){
			var content = '<iframe scrolling="auto" frameborder="0"  src="'+ href +'" style="width:100%;height:100%;"></iframe>';
			// iframe模式
			if(iframe){
				tabPanel.tabs('add',{
					title:title,
					content:content,
					iconCls:iconCls,
					fit:true,
					cls:'pd3',
					closable:true
				});
			}
			//div模式
			else{
				tabPanel.tabs('add',{
					title:title,
					href:href,
					iconCls:iconCls,
					fit:true,
					cls:'pd3',
					closable:true
				});
			}
		}
		else
		{
			tabPanel.tabs('select',title);
		}
	}
	//表单提交
	//表单
	function submitForm(){
        $('#ff').form('submit',{
            onSubmit:function(){
            	if($(this).form('enableValidation').form('validate')){

            		var data = $("#ff").serializeObject();
//          		console.log(data._id && data._id.trim().length>0)
            		if(data._id && data._id.trim().length>0){
            			// editMode
            			$.ajax({
                			method:'put',
                			url:'http://localhost:3000/news/data/' + data._id,
                			data: data
                		}).done(function(res){
                			$('#dlg').dialog('close')
                			$('#dg').datagrid('reload'); 
                		})
            		}else{
            			// addMode
            			delete data._id;//新增的时候id不能存在
                		$.ajax({
                			method:'post',
                			url:'http://localhost:3000/news/data',
                			data: data
                		}).done(function(res){
                			$('#dlg').dialog('close')
                			$('#dg').datagrid('reload'); 
                		})
            		}
            	}else{
            		$.messager.show({
		                title:'信息提示',
		                msg:'表单验证失败',
		                showType:'show'
		            });
            	}
            }
        });
    }
	//清空表单
	function clearForm(){
        $('#ff').form('clear');
    }
	//移除数据
	function removeMessage(){
		
		var gss = $("#dg").datagrid('getSelections');
        	var ids = [];
        	for(var i=0;i<gss.length;i++){
        		ids.push(gss[i]._id);
        	}

			$.ajax({
        		url:'http://localhost:3000/news/deletes',
        		method:'post',
        		data: {ids: ids.toString()}
        	}).done(function(res){
//      		console.log(res.status)
				$('#w').dialog('close') 
                $('#dg').datagrid('reload'); 
        		if(res.status === 200){
        			$.messager.show({
			                title:'信息提示',
			                msg:'删除数据成功',
			                showType:'show'
			            });
        		}else{
        			$.messager.show({
			                title:'信息提示',
			                msg:'请选择要删除的数据',
			                showType:'show'
			            });
        		}
        		$("#dg").datagrid("reload");
        	})
		
	}
	//加载数据
	$("#dg").datagrid({
		fit:true,
		toolbar:'#tb',
		rownumbers:true,
		checkbox:true,
		pagination:true,
		method:'post',
	    url:'http://localhost:3000/news/list',
	    columns:[[
	    	{field:'ck',checkbox:true},
		    {field:'title',title:'标题',width:100},
		    {field:'author',title:'作者',width:100},
		    {field:'date',title:'日期',width:200},
		    {field:'sort',title:'分类',width:100},
		    {field:'content',title:'摘要',width:200},
		    {field:'comment',title:'评论数',width:100},
		    {field:'opt',title:'操作', width:80,
				formatter: function(value,row,index){
					return "<a href='javascript:void(0)' onclick='editData("+JSON.stringify(row)+")'>编辑</a> <a href='javascript:void(0)' onclick='deletePop()'>删除</a>"
				}
			}
		]],
	    onDblClickRow(index,row){
	    	editData(row);
	    }
	})
	
	//搜索
	function keySearch(){
		var keywords = $('#keywords').val();
		$('#dg').datagrid({
			rownumbers:true,
			toolbar:'#tb',
			pagination:true,
			checkbox:true,
			fit:true,
			method:'post',
		    url:'http://localhost:3000/news/list',
		    queryParams:{
		    	title:keywords	
		    },
		    columns:[[
		    	{field:'ck',checkbox:true},
			    {field:'title',title:'标题',width:100},
			    {field:'author',title:'作者',width:100},
			    {field:'date',title:'日期',width:200},
			    {field:'sort',title:'分类',width:100},
			    {field:'content',title:'摘要',width:200},
			    {field:'comment',title:'评论数',width:100},
			    {field:'opt',title:'操作', width:80,
					formatter: function(value,row,index){
						return "<a href='javascript:void(0)' onclick='editData("+JSON.stringify(row)+")'>编辑</a> <a href='javascript:void(0)' onclick='deletePop()'>删除</a>"
					}
				}
		    ]],
		    onDblClickRow(index,row){
		    	editData(row);
		    }
		});
	}
	//修改
	function editData(row){
		
		$('#ff').form('load',row);//加载数据
		
		$('#dlg').dialog('open');
	}
	//删除提示
	function deletePop(){
		$('#w').dialog('open');
	}
//	增加删除提示
	function addPop(){
		$('#dlg').dialog('open');
	}
	//组织删除
	function cancelRemove(){
		$('#w').dialog('close');
		$("#dg").datagrid("reload");
	}
</script>